<template>
  <div class="tab-container">
    <el-row style="margin-bottom: 20px;">
      <el-col :span="14" style="display:flex">
        <div v-for="(item,index) in tabbarListData" :key="index" :class="[tabIndex==index?'active':'']" style="margin-right:20px;border-radius: 3px 3px 3px 3px;width:140px;height:30px;line-height:30px;border:1px solid #1B89F0;text-align:center;cursor:pointer;" type="primary" plain @click="tabbarChange(index)">{{item.name}}</div>
      </el-col>
      <el-col :span="8">  
        <el-input class="input" prefix-icon="el-icon-search" placeholder="请输入机构名称" style="width: 244px;" @input='inputChangeSearch' v-model="value"  />
        <el-button style="height:30px;line-height:0px;margin-left: 10px;padding-left: 23px;padding-right: 23px;" class="button" type="primary"  @click="submitInputChange">搜索</el-button>
        <!--  prefix-icon="el-icon-search"前缀图标 suffix-icon="el-icon-search"后缀图标 -->
        <!-- <el-input  prefix-icon="el-icon-search" style="width: 244px;height:10px;line-height:0px;" placeholder="请输入姓名" />
        <el-button type="primary" style="margin-left: 10px;height:30px;line-height:0px;padding-left: 23px;padding-right: 23px;">搜索</el-button> -->
      </el-col>
      <el-col :span="2">
      <el-dropdown style="float:right;margin-left: 10px; color: #0a76a4" trigger="click" @command='exclExportChange'>
      <span class="el-dropdown-link"  style="color:#409EFF">
     <i class="el-icon-download"></i> 导出<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item icon="el-icon-plus" command="a">导出此页</el-dropdown-item>
          <el-dropdown-item icon="el-icon-plus" command="b">导出全部</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      </el-col>
    </el-row>
    <!--<el-button type="primary" style="float:right;margin-left: 10px;">添加教师信息</el-button>-->
    <!--<el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">-->
      <!--<el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">-->
        <!-- <keep-alive>
          <tab-pane ref="pending"  type="D" @create="showCreatedTimes" :updateStatus='tabIndex' />
        </keep-alive> -->
      <!--</el-tab-pane>-->
    <!--</el-tabs>-->
    <!-- 列表数据 -->
    <el-table id="pendingApproval" :header-cell-style="{background:'#EEF3FC',color:'#333333'}" :data="list"  highlight-current-row style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        style="width: 8%"
        align="center">
      </el-table-column>
      <el-table-column style="width: 12%" align="center" label="机构名称" :show-overflow-tooltip='true'>
        <template slot-scope="scope">
          <span>{{ scope.row.firmName }}</span>
        </template>
      </el-table-column>

      <el-table-column style="width: 12%" align="center" label="法定代表人">
        <template slot-scope="scope">
          <span>{{ scope.row.firmUser }}</span>
        </template>
      </el-table-column>
      <el-table-column style="width: 12%" align="center" label="机构类型" :show-overflow-tooltip='true'>
        <template slot-scope="scope">
          <span>{{ scope.row.firmType }}</span>
        </template>
      </el-table-column>
      <el-table-column style="width: 12%" align="center" label="更新时间">
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>

      <el-table-column style="width: 12%" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text"  @click="urlTeacherDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
     background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
  import TabPane from './components/TabPane'
  import export_table_to_excel from '@/vendor/Export2Excel'
  export default {
    components: { TabPane },
    data() {
      return {
        // 审批列表数据
        list: [],
        tabMapOptions: [
          { label: '未核实', key: 'D' },
          { label: '已核实', key: 'W' },
        ],
        tabbarListData:[
          {
            name:'有待审批项'
          },
          {
            name:'已全部审批完成'
          }
        ],
        activeName: 'D',
        createdTimes: 0,
        // 导航切换默认下标
        tabIndex:0,
          // 分页加载
        loading: false,
        pageSizes: [10, 50, 100, 200, 500],
        total: 0,
        pagesize:10,
        currentPage:1,
        // 搜索的内容
        value:'',
         // 条数变化
        val:''
      }
    },
    watch: {
      activeName(val) {
        this.$router.push(`${this.$route.path}?tab=${val}`)
      }
    },
    mounted(){


    },
    created() {
      // 导航栏切换默认，看签个页面带回来的是什么值
      // this.tabIndex=this.$route.params.tabStatus?this.$route.params.tabStatus:0
      const tab = this.$route.query.tab
      if (tab) {
        this.activeName = tab
      }
       // 获取有待审批 相关数据
      this.getSysFirmList()
    },
    methods: {
        // 条数变化
      handleSizeChange(val) {
        this.val=val
        this.currentPage = 1;
        this.pagesize = val
        this.getSysFirmList()
      },
      // 换页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getSysFirmList()
      },
      // 搜索事件
      inputChangeSearch(e){
        this.value=e
        console.log('搜搜',this.value)
      },
      // 搜索提交事件
      submitInputChange(){
        // 先清空子组件列表数据在请求
        // this.$refs.enforce[0].list=[]
        this.$nextTick(() => {
          this.list=[]
          var _this = this;
          var index=''
          if(this.tabIndex==0){
            index=1
          }else {
            index=0
          }
          this.$http({
            url: this.$http.adornUrl('/info/searchKey?key='+this.value+'&type=1&page='+this.currentPage+'&limit='+this.pagesize+'&updateStatus='+index
            ),
            method: 'post',
            data:{}
          }).then(res=>{
            this.list=res.data.page.list
          })
        });
      },
       // 获取有待 或完成审批列表
      getSysFirmList(){
        let index=''
        if(this.tabIndex==0){
          index=1
        }else {
          index=0
        }
        this.$http({
          url: this.$http.adornUrl('/sys/firm/firmList?updateStatus='+index+'&limit='+this.pagesize+'&page='+this.currentPage
          ),
          method: 'post',
          data:{}
        }).then(res=>{
          if(res.data.code==0){
            this.list=res.data.page.list
            this.total=res.data.page.totalCount
          }
        })
      },
      tabbarChange(index){
        console.log('获取你点击的是',index)
        this.tabIndex=index
        this.list=[]
        this.getSysFirmList()
      },
       // 跳转详情
      urlTeacherDetail(row){
        console.log('跳转详情了')
        this.$router.push({ name: 'message', params: {id:'teacher',name:row.firmName,userId:row.userId,updateStatus:this.tabIndex} })
      },
      showCreatedTimes() {
        this.createdTimes = this.createdTimes + 1
      },
      current_change:function(currentPage){
        this.currentPage = currentPage;
      },
      // 导出此页
      exclExportChange(event){
        if(event=='a'){
          // 点击的是导出此页
          // 导出机构入驻审批列表
          export_table_to_excel('#pendingApproval','机构信息审批')
        }else {
          if(this.val==500){
            export_table_to_excel('#pendingApproval','机构信息审批')
          }else {
            this.$message.error('请先将页数调制每页500条后,再导出')
          }
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .tab-container {
    /* margin: 30px; */
  // 设置表格的每一个表格的高度
    /deep/.el-table td, .el-table th{
      padding: 4px 0;
    }

    // 设置搜索框高度未30
    .active:hover{
      background-color: #1B89F0 ;
      color: #ffffff;

    }
    .active{
      background-color: #1B89F0 ;
      color: #ffffff;
    }
  }
  .input{
    /deep/.el-input__inner{
      height: 30px;
    }
    /deep/.el-input__icon{
      line-height: 30px;
    }
  }
  
</style>
